<template>
  <div style="height: 100%" ref="dom"></div>
</template>

<script>
import * as echarts from 'echarts'
import { numAdd } from '@/utils/calulate'

export default {
  data() {
    return {
      myChart: null,
    }
  },

  components: {},
  props: {
    chartData: {
      type: Array,
      default: null,
    },
    name: {
      type: String,
      default: '',
    },
    height: {
      type: Number,
      default: null,
    },
    radius: {
      type: Array,
      default: () => {
        return [80, 120]
      },
    },
  },
  mounted() {
    this.createChart()
  },
  computed: {},
  watch: {
    chartData: function (n) {
      this.createChart()
    },
  },
  methods: {
    getOption(a_data) {
      let xData = [],
        yData = [],
        conut = 0
      a_data.forEach((v) => {
        xData.push(v.name)
        yData.push(v)
        conut = numAdd(conut, v.value)
      })
      return {
        title: {
          show: !!this.name,
          text: this.name,
          subtext: conut,
          left: 'center',
          top: '42%',
          textStyle: {
            fontSize: '18px',
            fontWeight: 'normal',
          },
          subtextStyle: {
            fontSize: '24px',
            lineHeight: 50,
            fontWeight: 'bold',
            color: '#000',
          },
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c} ({d}%)',
        },
        legend: {
          left: 'center',
          top: 'bottom',
          data: xData,
        },
        toolbox: {
          show: true,
        },
        series: [
          {
            name: 'Radius Mode',
            type: 'pie',
            radius: this.radius,
            // roseType: 'radius',
            itemStyle: {
              borderRadius: 8,
            },

            emphasis: {
              label: {
                show: true,
              },
            },
            // label: {
            //       alignTo: 'edge',
            //       edgeDistance: 1,
            //       },
            data: yData,
          },
        ],
      }
    },
    createChart() {
      let option = this.getOption(this.chartData)
      if (!this.myChart) this.myChart = echarts.init(this.$refs.dom)
      window.onresize = this.myChart.resize
      this.myChart.setOption(option)
    },
  },
  computed: {},
  destroyed() {},
}
</script>
<style lang='scss' scoped>
</style>